<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>{$title}</title>
    <link type="text/css" rel="stylesheet" href="{$url_front}/statics/css/monkey.css"/>
    <style type="text/css">
        html {
            background: url({$url_front}/statics/images/header_bg.jpg) repeat left top;
        }

        .login_wrap {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -120px 0 0 -140px;
            width: 280px;
            height: 200px;
        }

        .login_header {
            clear: both;
            height: 50px;
            background: url({$url_front}/statics/images/logo.png) no-repeat center;
        }

        .login_main {
        }

        .login_item {
            clear: both;
            margin: 10px 0 0 0;
            height: 40px;
            line-height: 40px;
            color: #CCC;
        }

        .login_input {
            padding: 0 5px;
            width: 270px;
            height: 40px;
            line-height: 40px;
            border: none;
            background: #FFF;
            font-size: 14px;
            color: #333;
        }

        .login_button {
            width: 280px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #458BC9;
            color: #FFF;
            background-color: #599DD8;
            background: -webkit-gradient(linear, left top, left bottom, from(#599DD8), to(#4E93CF));
            background: -moz-linear-gradient(top, #599DD8, #4E93CF);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599DD8', endColorstr='#4E93CF');
            background: -o-linear-gradient(top, #599DD8, #4E93CF);
            background: linear-gradient(top, #3283C6, #4E93CF);
            text-align: center;
            color: #FFF;
            cursor: pointer;
        }

        .login_button:hover {
            border: 1px solid #3C83C0;
            background-color: #599DD8;
            background: -webkit-gradient(linear, left top, left bottom, from(#5094D1), to(#458BC9));
            background: -moz-linear-gradient(top, #5094D1, #458BC9);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5094D1', endColorstr='#458BC9');
            background: -o-linear-gradient(top, #5094D1, #458BC9);
            background: linear-gradient(top, #5094D1, #458BC9);
        }
    </style>
    <script type="text/javascript" src="{$url_front}/statics/js/jquery.min.js"></script>
    <script type="text/javascript" src="{$url_front}/statics/js/placeholder.js"></script>
</head>

<body>

<!--login_wrap-->
<div class="login_wrap">

    <!--login_header-->
    <div class="login_header">

    </div>
    <!--/login_header-->

    <!--login_main-->
    <div class="login_main">
        <form action="{$url_login}" method="post">
            <div class="login_item">
                <input type="text" class="login_input" placeholder="用户名" tabindex="1" value="{$uname}" name="uname"/>
            </div>

            <div class="login_item">
                <input type="password" class="login_input" placeholder="密码" tabindex="2" name="password"/>
            </div>

            <div class="login_item">
                <div style='float:left;margin-right: 2px;'><input type="text" class="login_input" placeholder="验证码"
                                                                  tabindex="3" name="vcode" style="width: 148px"></div>
                <div style='float:left;'><img id="vcode" src="{$url_vcode}" alt="看不清的话点击一下图片。"
                                              onClick="refreshVerification()" title="看不清的话点击一下图片。"></div>
            </div>

            <div class="login_item">
                <input type="submit" value="登录" class="login_button" tabindex="4"/>
            </div>

            <div class="login_item">
                <span style="color: #FFFFFF">{$msg}</span>
            </div>

            <div class="login_item" style="display: none">
                <input type="text" value="{$token}" class="login_button" name="token"/>
            </div>

        </form>
    </div>
    <!--/login_main-->


</div>
<!--/login_wrap-->

</body>
</html>
<script>
    function refreshVerification() {
        var verification = document.getElementById("vcode");
        verification.src = verification.src + '?active=' + Math.random();
    }
</script>
